<template>
  <div class="sl-form-wrapper">
    <Form v-model:value="form" autocomplete="off" layout="inline">
      <Row :gutter="16">
        <Col :span="6">
          <FormItem label="应用" name="appId">
            <Select v-model:value="appId" :allowClear="true" :options="appOptions" placeholder="请选择应用" />
          </FormItem>
        </Col>
        <Col :span="6">
          <Button style="margin-right: 10px" type="primary" @click="getCmOrderActionPage">查询</Button>
          <Button @click="reset">重置</Button>
        </Col>
      </Row>
    </Form>
    <Table
      :columns="cmOrderActionColumns"
      :dataSource="cmOrderActionDataSource"
      :loading="loading"
      :pagination="pagination"
      :scroll="scroll"
      bordered
      class="main-table"
      show-size-changer
      @change="handleTableChange"
    >
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'operation'">
          <span v-per="'detail'"> <a @click="onViewDetail(record.id)">查看详情</a></span>
        </template>
      </template>
    </Table>

    <CmOrderActionDetail :cmOrderActionId="recordId" :visible="detailVisible" @close="handleDetailClose" />
  </div>
</template>
<script lang="ts" setup>
import { Button, Col, Form, FormItem, message, Row, Select, Table, TableProps } from 'ant-design-vue';
import { cmOrderActionColumns, form } from '/@/views/integrated-center/cm-order-action/data';
import { computed, ref } from 'vue';
import { getAppList } from '/@/api/maintenance-center/microservice-govern/scene/scene';
import { SelectItem } from '../data';
import { CmOrderActionItem } from '/@/api/integrated-center/model/integratedModel';
import { getCmOrderActions } from '/@/api/integrated-center/integrated';
import CmOrderActionDetail from './components/CmOrderActionDetail.vue';

const scroll = ref<undefined | object>(undefined);
const cmOrderActionDataSource = ref<CmOrderActionItem[]>([]);
const loading = ref(true);
let total = ref(0);

let appId = ref('');
let appOptions = ref<SelectItem[]>([]);

let detailVisible = ref(false);
let recordId = ref('');

// 分页设置
const pagination = computed(() => ({
  showSizeChanger: true,

  current: form.current,
  pageSize: form.size,
  total: total.value,
  pageSizeOptions: [10, 20, 50],
  showTotal: () => {
    return `共 ${total.value} 条`;
  },
}));

async function getAppOptions() {
  let res = await getAppList();
  res.forEach((app) => {
    appOptions.value.push({
      label: app.appName,
      value: app.appId,
    });
  });
}

async function getCmOrderActionPage() {
  try {
    form.appId = appId.value;
    await getCmOrderActions(form).then((res) => {
      cmOrderActionDataSource.value = res.items;
      total.value = res.total;
    });
  } catch (error) {
    message.error(error.message);
  } finally {
    loading.value = false;
  }
}

const handleTableChange: TableProps['onChange'] = (pag) => {
  pagination.value.current = Number(pag.current);
  pagination.value.pageSize = Number(pag.pageSize);
  form.size = Number(pag.pageSize);
  form.current = Number(pag.current);
  if (Number(pagination.value.pageSize) > 10) {
    scroll.value = { x: 1500, y: 500 };
  }
  getCmOrderActionPage();
};

const handleDetailClose = () => {
  detailVisible.value = false;
};

// 查看详情
const onViewDetail = async (id: string) => {
  detailVisible.value = true;
  recordId.value = id;
};

// 查询表单重置
async function reset() {
  form.appId = '';
  appId.value = '';
  getCmOrderActionPage();
}

getAppOptions();

getCmOrderActionPage();
</script>
<style lang="less">
.sl-form-wrapper {
  .ant-form-inline {
    flex-direction: column;
  }
}
</style>
